<template>
    <div class="page">
        <!-- <div class="head">
      <Title :arrow="true" routerName="employeeProfile"></Title>
    </div> -->

        <van-tabs :class="isVisable ? 'info-list show' : 'info-list hidden'" v-model="activeName" scrollspy sticky
            title-active-color="#fff" title-inactive-color='#e1e1e1' color="#fff" background="#3975C6">
            <!-- <div class="info-list"> -->

            <van-tab name="userInfo" title="基本信息">
                <!-- 员工信息 -->
                <div class="user-info">
                    <div class="left">
                        <img v-if="userRowdata.GENDER == '男'" src="@/assets/img/man.png" alt="">
                        <img v-else src="@/assets/img/woman.png" alt="">
                    </div>
                    <div class="right">
                        <div class="info">
                            <div class="info-name">
                                <span class="title">{{ userRowdata.NAME || '-' }}</span>
                                <span class="code">{{ userRowdata.BADGE || '' }}</span>
                            </div>
                            <div class="info-status">
                                <span class="stu1">{{ userRowdata.STATUS || '' }}</span>
                                <!-- <span v-else class="stu2">离职</span> -->
                            </div>
                        </div>
                        <div class="depart-name">
                            <span class="t1">{{ userRowdata.DEPT }}</span>
                            <!-- <span class="t1">{{ userRowdata.YYB }}</span> -->
                            <span class="t2">{{ userRowdata.JOBNAME }}
                                <span v-if="userRowdata.JOBGRADENAME">
                                    ({{ userRowdata.JOBGRADENAME }})
                                </span>
                            </span>
                        </div>
                        <div class="depart-name">
                            <span class="t1">{{ userRowdata.FGS }}-{{ userRowdata.YYB }}</span>
                        </div>
                    </div>
                </div>
                <!-- 基本信息 -->
                <div class="base-info">
                    <div class="head">基本信息</div>
                    <van-divider class="divider" />
                    <div class="content">
                        <p class="pdata">
                            <span class="key">性别</span>
                            <span class="value">{{ basicInfo.GENDER || '-' }}</span>
                        </p>
                        <p class="pdata">
                            <span class="key">年龄</span>
                            <span class="value">{{ basicInfo.AGE || '-' }}</span>
                        </p>
                        <p class="pdata">
                            <span class="key">政治面貌</span>
                            <span class="value">{{ basicInfo.ZZMM || '-' }}</span>
                        </p>
                        <!-- <p class="pdata">
                            <span class="key">证件类型</span>
                            <span class="value">{{ basicInfo.CARDTYPE || '-' }}</span>
                        </p>
                        <p class="pdata">
                            <span class="key">证件号码</span>
                            <span class="value">{{ basicInfo.IDENTIFICATION || '-' }}</span>
                        </p> -->
                        <p class="pdata">
                            <span class="key">固定电话</span>
                            <span class="value">{{ basicInfo.OFFICE_PHONE || '-' }}</span>
                        </p>
                        <p class="pdata">
                            <span class="key">电子邮件</span>
                            <span class="value">{{ basicInfo.EMAIL || '-' }}</span>
                        </p>
                        <p class="pdata">
                            <span class="key">手机号码</span>
                            <span class="value">{{ basicInfo.MOBILE || '-' }}</span>
                        </p>
                    </div>
                </div>
            </van-tab>
            <van-tab name="postInfo" title="岗位信息">
                <!-- 岗位信息 -->
                <div class="base-info">
                    <div class="head">岗位信息</div>
                    <van-divider class="divider" />
                    <div class="content">
                        <p class="pdata">
                            <span class="key">入职日期</span>
                            <span class="value">{{ basicInfo.JOINDATE || '-' }}</span>
                        </p>
                        <p class="pdata">
                            <span class="key">所属团队</span>
                            <span class="value">{{ basicInfo.DEPARTMENTNAME || '-' }}</span>
                        </p>
                        <p class="pdata">
                            <span class="key">所属营业部</span>
                            <span class="value">{{ basicInfo.YYB || '-' }}</span>
                        </p>
                        <p class="pdata">
                            <span class="key">部门</span>
                            <span class="value">{{ basicInfo.DEPT || '-' }}</span>
                        </p>
                        <p class="pdata">
                            <span class="key">岗位</span>
                            <span class="value">{{ basicInfo.JOBNAME || '-' }}</span>
                        </p>
                        <p class="pdata">
                            <span class="key">汇报上级</span>
                            <span class="value">{{ basicInfo.LEADER_NAME || '-' }}</span>
                        </p>
                        <p class="pdata">
                            <span class="key">职级</span>
                            <span class="value">{{ basicInfo.JOBGRADENAME || '-' }}</span>
                        </p>
                        <van-divider />
                        <!-- 历史变动 -->
                        <div class="history-list">
                            <p class="subtitle"><span>历史岗位变动情况</span>
                                <span class="num" v-if="Lsgwbdqk.length > 0">
                                    ({{ Lsgwbdqk.length }}次变动)
                                </span>
                            </p>
                            <van-steps class="history-step" direction="vertical" :active="historyStatus"
                                v-if="Lsgwbdqk.length">
                                <van-step class="step-item" v-for="(item, index) in Lsgwbdqk" :key="index">
                                    <template #inactive-icon>
                                        <img src="@/assets/img/step-icon.png" alt="">
                                    </template>
                                    <p class="head-time">{{ item.RQ }}</p>
                                    <div class="content-body">
                                        <p class="top"><span>岗位: 从"{{ item.YLBNM }}”变更为"{{ item.XLBNM }}"</span></p>
                                        <p class="top"><span>职级: 从"{{ item.YJBNM }}"变更为"{{ item.XJBNM }}"</span></p>
                                    </div>
                                </van-step>
                            </van-steps>
                            <div v-else style="color: #929292; font-size: 12px; text-align: center; padding-top: 10px;">
                                暂无数据</div>
                        </div>
                    </div>

                </div>
            </van-tab>
            <van-tab name="testInfo" title="考试科目">
                <!-- 考试科目信息 -->
                <div class="base-info">
                    <div class="head">考试科目信息<span class="num" v-if="examInfo.length > 0">({{ examInfo.length
                            }}条记录)</span></div>
                    <van-divider class="divider" />
                    <div class="content test-info" v-if="examInfo.length">
                        <div class="test-body" v-for="(item, index) in examInfo" :key="index">
                            <div class="left">
                                <p class="con">
                                    <span>{{ item.NOTE || '-' }}</span>
                                    <span class="s-text"><span class="score">{{ item.KSCJ || 0 }}</span>分</span>
                                </p>
                                <p class="con">
                                    <span>编号：<span class="con-col">{{ item.KMBH || '-' }}</span></span>
                                    <span>考试日期：<span class="con-col">{{ item.KSRQ || '-' }}</span></span>
                                </p>
                            </div>
                            <!-- <div class="right">
                <span class="score">{{ item.KSCJ || 0 }}</span><span>分</span>
              </div> -->
                        </div>
                    </div>
                    <div v-else style="color: #929292; font-size: 12px; text-align: center; padding-top: 10px;">暂无数据
                    </div>
                </div>
            </van-tab>
            <van-tab name="professionalInfo" title="执业资格">
                <!-- 执业资格-->
                <div class="base-info">
                    <div class="head">执业资格
                        <span class="num" v-if="professionQualification.length > 0">
                            ({{ professionQualification.length }}条记录)
                        </span>
                    </div>
                    <van-divider class="divider" />
                    <div class="content professional-info" v-if="professionQualification.length">
                        <div class="profess-body" v-for="(item, index) in professionQualification" :key="index">
                            <p class="tit"><span>{{ item.NOTE || '-' }}</span></p>
                            <div class="con">
                                <p class="time profess-code">
                                    <span>登记编号：<span class="con-col con-code">{{ item.ZSBH || '-'
                                            }}</span></span>
                                    <!-- <span>登记编号：<span class="con-col">{{ item.ZSBH || '-' }}080014</span></span> -->
                                    <span>获取日期：<span class="con-col">{{ item.HQSJ || '-' }}</span></span>
                                </p>
                                <p class="time profess-code">
                                    <span>生效日期：<span class="con-col con-code">{{ item.SXRQ || '-' }}</span></span>
                                    <span>截止日期：<span class="con-col">{{ item.JZRQ || '-' }}</span></span>
                                </p>
                            </div>
                        </div>
                    </div>
                    <div v-else style="color: #929292; font-size: 12px; text-align: center; padding-top: 10px;">暂无数据
                    </div>
                </div>
            </van-tab>
            <van-tab name="partTimeJob" title="对外兼职">
                <!-- 对外兼职 -->
                <div class="base-info">
                    <div class="head">对外兼职<span class="num" v-if="HgbbDwjz.length > 0">({{ HgbbDwjz.length }}条记录)</span>
                    </div>
                    <van-divider class="divider" />
                    <div class="content professional-info" v-if="HgbbDwjz.length">
                        <div class="profess-body" v-for="(item, index) in HgbbDwjz" :key="index">
                            <p class="tit"><span>{{ item.NAME_JIANZHI_ORG || '-' }}</span></p>
                            <div class="con">
                                <p class="time">
                                    <span>兼职时间起：<span class="con-col">{{ item.START_JIANZHI || '-' }}</span></span>
                                    <span>兼职时间止：<span class="con-col">{{ item.END_JIANZHI || '-' }}</span></span>
                                </p>
                            </div>
                        </div>
                    </div>
                    <div v-else style="color: #929292; font-size: 12px; text-align: center; padding-top: 10px;">暂无数据
                    </div>
                </div>
            </van-tab>
            <van-tab name="accountReporting" title="账户报备">
                <!-- 账户报备 -->
                <div class="base-info">
                    <div class="head">账户报备<span class="num" v-if="HgbbZqzh.length > 0">({{ HgbbZqzh.length }}条记录)</span>
                    </div>
                    <van-divider class="divider" />
                    <div class="content professional-info" v-if="HgbbZqzh.length">
                        <div class="profess-body" v-for="(item, index) in HgbbZqzh" :key="index">
                            <p class="tit"><span>{{ item.SEC_ACC_COMPANY || '-' }}</span>
                                <span class="more" v-if="item.IS_HOLD_SHARE.includes('是')">持有股票</span>
                            </p>
                            <div class="con">
                                <p class="time">
                                    <span>沪A：<span class="con-col">{{ item.HUA_NAME || '-' }}</span></span>
                                    <span>沪B：<span class="con-col">{{ item.HUB_NAME || '-' }}</span></span>
                                </p>
                                <p class="time">
                                    <span>深A：<span class="con-col">{{ item.SZA_NAME || '-' }}</span></span>
                                    <span>深B：<span class="con-col">{{ item.SZB_NAME || '-' }}</span></span>
                                </p>
                            </div>
                        </div>
                    </div>
                    <div v-else style="color: #929292; font-size: 12px; text-align: center; padding-top: 10px;">暂无数据
                    </div>
                </div>
            </van-tab>
            <van-tab name="complaints" title="投诉处理">
                <!-- 投诉处理 -->
                <div class="base-info">
                    <div class="head">投诉处理<span class="num" v-if="Tscl.length > 0">({{ Tscl.length }}条记录)</span></div>
                    <van-divider class="divider" />
                    <div class="content complaints-info" v-if="Tscl.length">
                        <div class="complaints-body" v-for="(item, index) in Tscl" :key="index">
                            <p class="tit"><span>{{ item.TSLY || '-' }}</span><span class="more">{{ item.SFBJ || '-'
                                    }}</span></p>
                            <div class="con">
                                <p class="row">
                                    <span class="row-tit">客户号：</span><span class="con-col">{{ item.KHH || '-' }}</span>
                                </p>
                                <p class="row">
                                    <span class="row-tit">客户姓名：</span><span class="con-col">{{ item.KHXM || '-'
                                        }}</span>
                                </p>
                                <p class="row">
                                    <span class="row-tit">受理日期：</span><span class="con-col">{{ item.SLRQ || '-'
                                        }}</span>
                                </p>
                                <p class="row">
                                    <span class="row-tit">客户反应情况与需求：</span>
                                    <span :class="item.show ? 'con-col open-more-block' : 'con-col'">
                                        {{ item.KHFYQKYSQ || '-' }}
                                    </span>
                                </p>
                                <p class="row">
                                    <span class="row-tit">处理情况与处理结果：</span>
                                    <span :class="item.show ? 'con-col open-more-block' : 'con-col'">
                                        {{ item.CLQKJCLJG || '-' }}
                                    </span>
                                </p>
                                <p class="row" v-if="item.show">
                                    <span class="row-tit">是否和解：</span><span class="con-col">{{ item.SFHJ || '-'
                                        }}</span>
                                </p>
                                <p class="row" v-if="item.show">
                                    <span class="row-tit">赔偿金额：</span><span class="con-col">{{ item.PCJE || '-'
                                        }}</span>
                                </p>
                                <p class="row" v-if="item.show">
                                    <span class="row-tit">赔偿情况：</span><span class="con-col">{{ item.PCQK || '-'
                                        }}</span>
                                </p>
                            </div>
                            <div class="tscl-more" @click="handleMoreTscl(item, index)">
                                <van-icon :name="item.show ? 'arrow-up' : 'arrow-down'" />
                            </div>
                        </div>
                    </div>
                    <div v-else style="color: #929292; font-size: 12px; text-align: center; padding-top: 10px;">暂无数据
                    </div>
                </div>
            </van-tab>
            <van-tab name="letters" title="交易所函件">
                <!-- 交易所函件 -->
                <div class="base-info">
                    <div class="head">交易所函件<span class="num" v-if="Jyshj.length > 0">({{ Jyshj.length }}条记录)</span>
                    </div>
                    <van-divider class="divider" />
                    <div class="content complaints-info" v-if="Jyshj.length">
                        <div class="complaints-body" v-for="(item, index) in Jyshj" :key="index">
                            <p class="tit"><span>{{ item.市场 }}</span><span class="more">{{ item.HJ_TYPE || '-' }}</span>
                            </p>
                            <div class="con">
                                <p class="row">
                                    <span class="row-tit">客户姓名：</span><span class="con-col">{{ item.CLIENT || '-'
                                        }}</span>
                                </p>
                                <p class="row">
                                    <span class="row-tit">客户号：</span><span class="con-col">{{ item.CLIENT_ID || '-'
                                        }}</span>
                                </p>
                                <p class="row">
                                    <span class="row-tit">事项：</span>
                                    <span :class="item.show ? 'con-col open-more-block' : 'con-col'">
                                        {{ item.SX || '-' }}
                                    </span>
                                </p>
                                <p class="row">
                                    <span class="row-tit">事项说明：</span>
                                    <span :class="item.show ? 'con-col open-more-block' : 'con-col'">
                                        {{ item.SXSM || '-' }}
                                    </span>
                                </p>
                                <p class="row">
                                    <span class="row-tit">营业部说明：</span>
                                    <span :class="item.show ? 'con-col open-more-block' : 'con-col'">
                                        {{ item.YYBSM || '-' }}
                                    </span>
                                </p>
                            </div>
                            <div class="tscl-more" v-if="item.SXSM.length > 54 || item.YYBSM.length > 54"
                                @click="handleMoreJyshj(item, index)">
                                <van-icon :name="item.show ? 'arrow-up' : 'arrow-down'" />
                            </div>
                        </div>
                    </div>
                    <div v-else style="color: #929292; font-size: 12px; text-align: center; padding-top: 10px;">暂无数据
                    </div>
                </div>
            </van-tab>
            <van-tab name="riskControlProcess" title="OA风控流程">
                <!-- OA风控流程 -->
                <div class="base-info">
                    <div class="head">OA风控流程<span class="num" v-if="Xgoafklc.length > 0">({{ Xgoafklc.length
                            }}条记录)</span></div>
                    <van-divider class="divider" />
                    <div class="content complaints-info" v-if="Xgoafklc.length">
                        <div class="complaints-body" v-for="(item, index) in Xgoafklc" :key="index">
                            <p class="tit"><span>{{ item.RISK_MATTERS || '-' }}</span></p>
                            <div class="con">
                                <p class="row">
                                    <span class="row-tit">发现日期：</span><span class="con-col">{{ item.DISCOVERY_DATE ||
                                        '-' }}</span>
                                </p>
                                <p class="row">
                                    <span class="row-tit">客户姓名：</span><span class="con-col">{{ item.CLIENT_NAME || '-'
                                        }}</span>
                                </p>
                                <p class="row">
                                    <span class="row-tit">客户号：</span><span class="con-col">{{ item.CLIENT_NO || '-'
                                        }}</span>
                                </p>
                                <p class="row">
                                    <span class="row-tit">处理结果：</span><span class="con-col">{{ item.PROCESS_NAME || '-'
                                        }}</span>
                                </p>
                            </div>
                        </div>

                    </div>
                    <div v-else style="color: #929292; font-size: 12px; text-align: center; padding-top: 10px;">暂无数据
                    </div>
                </div>
            </van-tab>
            <van-tab name="identification" title="投资者强化身份识别流程">
                <!-- 投资者强化身份识别流程 -->
                <div class="base-info">
                    <div class="head">投资者强化身份识别流程<span class="num" v-if="Qhshsb.length > 0">({{ Qhshsb.length
                            }}条记录)</span>
                    </div>
                    <van-divider class="divider" />
                    <div class="content complaints-info" v-if="Qhshsb.length">
                        <div class="complaints-body" v-for="(item, index) in Qhshsb" :key="index">
                            <!-- <p class="tit"><span>投资者强化身份识别流程</span></p> -->
                            <div class="con">
                                <p class="row">
                                    <span class="row-tit">客户姓名：</span><span class="con-col">{{ item.KHXM || '-'
                                        }}</span>
                                </p>
                                <p class="row">
                                    <span class="row-tit">客户号：</span><span class="con-col">{{ item.KHBH || '-' }}</span>
                                </p>
                                <p class="row">
                                    <span class="row-tit">下发日期：</span><span class="con-col">{{ item.LCXFRQ || '-'
                                        }}</span>
                                </p>
                                <p class="row">
                                    <span class="row-tit">处理结果：</span><span class="con-col">{{ item.CLJG || '-'
                                        }}</span>
                                </p>
                            </div>
                        </div>

                    </div>
                    <div v-else style="color: #929292; font-size: 12px; text-align: center; padding-top: 10px;">暂无数据
                    </div>
                </div>
            </van-tab>
            <van-tab name="case" title="超期合规案例">
                <!-- 超期合规案例 -->
                <div class="base-info">
                    <div class="head">超期合规案例<span class="num" v-if="Cqhgal.length > 0">({{ Cqhgal.length }}条记录)</span>
                    </div>
                    <van-divider class="divider" />
                    <div class="content complaints-info" v-if="Cqhgal.length">
                        <div class="complaints-body" v-for="(item, index) in Cqhgal" :key="index">
                            <p class="tit"><span>{{ item.CONTENT || '-' }}</span><span class="more">{{ item.STATUS ||
                                '-' }}</span>
                            </p>
                            <div class="con">
                                <p class="row">
                                    <span class="row-tit">派发人：</span><span class="con-col">{{ item.EMPE_NM || '-'
                                        }}</span>
                                </p>
                                <p class="row">
                                    <span class="row-tit">派发日期：</span><span class="con-col">{{ item.SEND_TM || '-'
                                        }}</span>
                                </p>
                                <p class="row">
                                    <span class="row-tit">学习时间：</span><span class="con-col">{{ item.STUDY_TIME || '-'
                                        }}</span>
                                </p>
                                <p class="row">
                                    <span class="row-tit">违规事项：</span><span class="con-col">{{ item.CONTENT || '-'
                                        }}</span>
                                </p>
                                <p class="row">
                                    <span class="row-tit">违规内容：</span><span class="con-col">{{ item.DESCRIPTION || '-'
                                        }}</span>
                                </p>
                            </div>
                        </div>

                    </div>
                    <div v-else style="color: #929292; font-size: 12px; text-align: center; padding-top: 10px;">暂无数据
                    </div>
                </div>
            </van-tab>
            <van-tab name="checklist" title="中登异常账户核查清单">
                <!-- 中登异常账户核查清单 -->
                <div class="base-info">
                    <div class="head">中登异常账户核查清单<span class="num" v-if="Zdyczhhcqd.length > 0">({{ Zdyczhhcqd.length
                            }}条记录)</span>
                    </div>
                    <van-divider class="divider" />
                    <div class="content complaints-info" v-if="Zdyczhhcqd.length">
                        <div class="complaints-body" v-for="(item, index) in Zdyczhhcqd" :key="index">
                            <p class="tit" style="justify-content: end;">
                                <!-- <span>中登异常账户核查清单</span> -->
                                <span class="more">{{ item.HOLDER_STATUS || '-' }}</span>
                            </p>
                            <div class="con">
                                <p class="row">
                                    <span class="row-tit">客户姓名：</span><span class="con-col">{{ item.CLIENT_NAME || '-'
                                        }}</span>
                                </p>
                                <p class="row">
                                    <span class="row-tit">客户号：</span><span class="con-col">{{ item.HS_CUST_NO || '-'
                                        }}</span>
                                </p>
                                <p class="row">
                                    <span class="row-tit">核查时间：</span><span class="con-col">{{ item.CHECK_TIME || '-'
                                        }}</span>
                                </p>
                                <p class="row">
                                    <span class="row-tit">核查详情：</span><span class="con-col">{{ item.CHECK_CONTENT || '-'
                                        }}</span>
                                </p>
                            </div>
                        </div>

                    </div>
                    <div v-else style="color: #929292; font-size: 12px; text-align: center;padding-top: 10px;">暂无数据
                    </div>
                </div>
            </van-tab>
            <!-- </div> -->
        </van-tabs>

    </div>
</template>

<script>
import { getCaseData } from '@/api/case'
import Title from '@/components/commonTitle.vue'
import waterMark from '@/utils/waterMark'
export default {
    name: 'profileDetail',
    components: { Title, },
    data() {
        return {
            userRowdata: {},
            basicInfo: {}, // 基本信息
            Lsgwbdqk: [], // 历史岗位变动情况
            examInfo: [], // 考试科目信息
            professionQualification: [], // 执业资格
            HgbbDwjz: [], // 对外兼职
            HgbbZqzh: [], // 账户报备
            Tscl: [], // 投诉处理
            Jyshj: [], // 交易所函件
            Xgoafklc: [], // 封控流程
            Qhshsb: [], // 身份识别流程
            Cqhgal: [], // 超期合规案例 
            Zdyczhhcqd: [],// 中登异常账户核查清单
            isVisable: false,
            activeName: "userInfo",
            assessmentList: [
                { id: '1', title: '1知识测称名称 (2024年度)', sex: 1, branch: '中信证券(山东)济南华信路证券营业部(执行)', jd: '112营业部副总经理 (执行)', depart: '11营业部-市场拓展部', code: '123123', status: -1, starttime: '2024-02-11 12:00', endtime: '2024-02-11 14:00', name: '吴婷婷1', statustext: '已缺考' },
                { id: '2', title: '2知识测评名称名称 (2024年度)', sex: 2, branch: '2中信证券(山东)济南华信路证券营业部', jd: '22营业部副总经理 (执行)', depart: '22营业部-市场拓展部', code: '2332432', status: 0, starttime: '2024-02-11 12:00', endtime: '2024-02-11 14:00', name: '吴婷婷2', statustext: '未开始' },
                { id: '3', title: '3知识测评名称 (2024年度)', sex: 1, branch: '3营业中信证券(山东)济南华信路证券营业部', jd: '3营业部副总经理 (执行)', depart: '33营业部-市场拓展部', code: '343234', status: 1, starttime: '2024-02-11 12:00', endtime: '2024-02-11 14:00', name: '吴婷婷3', statustext: '未答题' },
                { id: '43', title: '4知识测 (2024年度)', sex: 2, branch: '4中信证券(山东)济南华信路证券营业部经理(执行)', jd: '4营业部副总经理 (执行)', depart: '44营业部-市场拓展部', code: '5324322', status: 2, starttime: '2024-02-11 12:00', endtime: '2024-02-11 14:00', name: '吴婷婷4', statustext: '已答题', score: 90 },
                { id: '44', title: '4知识测 (2024年度)', sex: 2, branch: '4中信证券(山东)济南华信路证券营业部经理(执行)', jd: '4营业部副总经理 (执行)', depart: '44营业部-市场拓展部', code: '5324322', status: 2, starttime: '2024-02-11 12:00', endtime: '2024-02-11 14:00', name: '吴婷婷4', statustext: '已答题', score: 90 },
                { id: '45', title: '4知识测 (2024年度)', sex: 2, branch: '4中信证券(山东)济南华信路证券营业部经理(执行)', jd: '4营业部副总经理 (执行)', depart: '44营业部-市场拓展部', code: '5324322', status: 2, starttime: '2024-02-11 12:00', endtime: '2024-02-11 14:00', name: '吴婷婷4', statustext: '已答题', score: 90 },
                { id: '46', title: '4知识测 (2024年度)', sex: 2, branch: '4中信证券(山东)济南华信路证券营业部经理(执行)', jd: '4营业部副总经理 (执行)', depart: '44营业部-市场拓展部', code: '5324322', status: 2, starttime: '2024-02-11 12:00', endtime: '2024-02-11 14:00', name: '吴婷婷4', statustext: '已答题', score: 90 }
            ],
            historyStatus: 'null',
        }
    },
    watch: {
        '$route.query.id'(val) {
            // console.log(val,'----val');
            if (val) this.getDataInfo()
            this.userRowdata = JSON.parse(this.$route.query.rowdata) || {}
        }
    },
    created() {
        this.userRowdata = JSON.parse(this.$route.query.rowdata) || {}
        this.getDataInfo()
        window.addEventListener('scroll', this.windowScrollListener, true);
    },
    methods: {
        handleMoreTscl(item, index) {
            item.show = !item.show
            this.Tscl.splice(index, 1, item)
        },
        handleMoreJyshj(item, index) {
            item.show = !item.show
            this.Jyshj.splice(index, 1, item)
        },
        async getDataInfo() {
            const resData = await getCaseData({ code: '80303', badge: this.$route.query.id })
            if (!resData || !resData.data) return
            this.basicInfo = resData.data.basicInfo[0] || {}
            this.Lsgwbdqk = resData.data.Lsgwbdqk || []
            this.examInfo = resData.data.examInfo || []
            this.professionQualification = resData.data.professionQualification || []
            this.HgbbDwjz = resData.data.HgbbDwjz || []
            this.HgbbZqzh = resData.data.HgbbZqzh || []
            this.Tscl = resData.data.Tscl || []
            this.Jyshj = resData.data.Jyshj || []
            this.Xgoafklc = resData.data.Xgoafklc || []
            this.Qhshsb = resData.data.Qhshsb || []
            this.Cqhgal = resData.data.Cqhgal || []
            this.Zdyczhhcqd = resData.data.Zdyczhhcqd || []

            this.Tscl = this.Tscl.map(item => {
                item.show = false
                return { ...item }
            })
            this.Jyshj = this.Jyshj.map(item => {
                item.show = false
                return { ...item }
            })
        },
        //监听窗口滚动
        windowScrollListener: function () {
            //获取操作元素最顶端到页面顶端的垂直距离
            let ele = document.getElementsByClassName('info-list')[0]
            // console.log(ele.scrollTop, '----scrollTop');
            if (ele && ele.scrollTop >= 80) {
                this.isVisable = true; //大于80时显示元素
            }
            if (ele && ele.scrollTop < 80) {
                this.isVisable = false; //小于80时隐藏元素
            }
        }
    },
    destroyed() {
        //离开页面时删除该监听
        window.removeEventListener('scroll', this.windowScrollListener, true)
    }
}
</script>

<style lang="less" scoped>
.page {
    height: 100%;

    .info-list {
        // height: calc(100% - 90px);
        height: 100%;
        overflow: auto;

        /deep/ .van-tabs__wrap {
            transition: all 0.3s;
            width: 100%;
            position: fixed;
            top: 0;
            z-index: 9999;
        }

        // 员工信息
        .user-info {
            padding-left: 30px;
            padding-right: 30px;
            margin-bottom: 20px;
            background: #fff;
            padding: 30px;
            display: flex;
            justify-content: start;
            cursor: pointer;

            .left {
                width: 96px;
                height: 120px;
                // background: red;
                margin-right: 20px;

                img {
                    width: 100%;
                    // height: 100%;
                }
            }

            .right {
                width: 100%;
                height: 120px;
                display: flex;
                justify-content: space-between;
                flex-direction: column;

                .info {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    .info-name {
                        font-size: 26px;
                        line-height: 40px;
                        color: #333;
                        font-weight: 400;
                        font-family: SourceHanSansCN, SourceHanSansCN;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;

                        .title {
                            padding-right: 16px;
                        }

                        .code {
                            color: #7F8389;
                        }
                    }

                    .info-status {
                        font-size: 24px;
                        line-height: 36px;
                        font-family: SourceHanSansCN, SourceHanSansCN;

                        .stu1 {
                            color: #397FF9;
                        }

                        .stu2 {
                            color: #666;
                        }
                    }
                }

                .depart-name {
                    font-family: SourceHanSansCN, SourceHanSansCN;
                    font-weight: 400;
                    font-size: 24px;
                    color: #7F8389;
                    line-height: 36px;

                    .t1 {
                        padding-right: 36px;
                    }
                }
            }
        }



        // 基本信息
        .base-info {
            padding-bottom: 44px;
            margin-bottom: 20px;
            background: #fff;

            .head {
                font-family: SourceHanSansCN, SourceHanSansCN;
                font-weight: 400;
                font-size: 26px;
                color: #333333;
                padding: 28px 20px;

                .num {
                    color: #397FF9;
                }
            }

            .divider {
                margin: 0;
            }

            .content {
                padding-top: 30px;
                padding-left: 30px;
                padding-right: 30px;

                // 基本信息/岗位信息
                .pdata {
                    display: flex;
                    justify-content: space-between;
                    font-family: SourceHanSansCN, SourceHanSansCN;
                    font-weight: 400;
                    font-size: 26px;
                    line-height: 40px;
                    margin-bottom: 16px;

                    &:last-child {
                        margin-bottom: 0;
                    }

                    .key {
                        color: #5A4F4F;
                    }

                    .value {
                        color: #7F8389;
                    }
                }

                // 历史变动
                .history-list {

                    .subtitle {
                        font-family: SourceHanSansCN, SourceHanSansCN;
                        font-weight: 400;
                        font-size: 26px;
                        color: #7F8389;
                        line-height: 40px;

                        .num {
                            color: #397FF9;
                        }
                    }

                    .history-step {
                        padding-left: 48px;
                        color: #7F8389;

                        .step-item {
                            font-family: SourceHanSansCN, SourceHanSansCN;
                            font-weight: 400;
                            font-size: 26px;
                            color: #7F8389;

                            &::after {
                                border: none;
                            }

                            /deep/.van-step__circle-container {
                                width: 32px;
                                height: 32px;

                                img {
                                    width: 100%;
                                    height: 100%;
                                }
                            }

                            .head-time {}

                            .content-body {
                                margin-top: 20px;
                                padding: 30px;
                                line-height: 42px;
                                background: #F5F7FA;

                                .top {
                                    height: 42px;
                                }
                            }
                        }
                    }
                }
            }

            // 考试科目信息
            .test-info {
                padding-top: 0;

                // display: flex;
                .test-body {
                    display: flex;
                    justify-content: space-between;
                    flex-direction: row;

                    font-family: SourceHanSansCN, SourceHanSansCN;
                    font-weight: 400;
                    font-size: 26px;
                    color: #5A4F4F;
                    line-height: 40px;
                    align-items: center;
                    padding-top: 30px;
                    border-bottom: 1px solid #ebedf0;

                    &:last-child {
                        border: none;
                    }

                    .left {
                        flex: 1;

                        .con {
                            height: 60px;
                            display: flex;
                            justify-content: space-between;

                            .s-text {
                                font-size: 20px;

                                .score {
                                    font-family: CITIC-Numbers, CITIC-Numbers;
                                    font-weight: 500;
                                    font-size: 40px;
                                    color: #397FF9;
                                }
                            }

                            .con-col {
                                color: #7F8389;
                                display: inline-block;
                                vertical-align: text-bottom;
                                // width: 150px;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                            }
                        }
                    }

                    // .right {
                    //   width: 130px;
                    //   text-align: right;
                    //   // display: flex;
                    //   // align-content: center;

                    //   .score {
                    //     font-family: CITIC-Numbers, CITIC-Numbers;
                    //     font-weight: 500;
                    //     font-size: 60px;
                    //     color: #397FF9;
                    //     line-height: 60px;
                    //   }
                    // }
                }
            }

            // 执业资格/对外兼职/账户报备
            .professional-info {
                .profess-body {
                    padding: 30px;
                    border: 1px solid #ebedf0;
                    margin-bottom: 30px;

                    &:last-child {
                        margin-bottom: 0;
                    }

                    .tit {
                        display: flex;
                        justify-content: space-between;
                        font-family: SourceHanSansCN, SourceHanSansCN;
                        font-weight: 500;
                        font-size: 28px;
                        color: #333333;
                        // line-height: 42px;
                        // height: 48px;
                        padding-bottom: 20px;
                        border-bottom: 1px solid #DEDEDE;

                        .more {
                            font-size: 26px;
                            color: #7F8389;
                        }
                    }

                    .con {
                        display: flex;
                        flex-direction: column;
                        font-family: SourceHanSansCN, SourceHanSansCN;
                        font-weight: 400;
                        font-size: 26px;
                        color: #5A4F4F;
                        padding-top: 20px;

                        .time {
                            display: flex;
                            flex-direction: row;
                            justify-content: space-between;
                            height: 56px;

                            span {
                                width: 49%;
                            }

                            &:last-child {
                                height: auto;
                            }

                            .con-col {
                                color: #7F8389;
                                display: inline-block;
                                vertical-align: text-bottom;
                                // width: 146px;
                                width: auto;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                            }
                        }

                        .profess-code {
                            span {
                                width: auto;
                            }

                            .con-code {
                                width: 220px;
                            }
                        }

                    }
                }
            }

            // 投诉处理/交易所函件/OA风控流程/投资者强化身份识别流程/超期合规案例/中登异常账户核查清单
            .complaints-info {
                .complaints-body {
                    padding: 30px;
                    border: 1px solid #ebedf0;
                    margin-bottom: 30px;

                    padding-bottom: 40px;
                    position: relative;

                    &:last-child {
                        margin-bottom: 0;
                    }

                    .tit {
                        display: flex;
                        justify-content: space-between;
                        font-family: SourceHanSansCN, SourceHanSansCN;
                        font-weight: 500;
                        font-size: 28px;
                        color: #333333;
                        // line-height: 42px;
                        // height: 48px;
                        padding-bottom: 20px;
                        border-bottom: 1px solid #DEDEDE;

                        .more {
                            font-size: 26px;
                            color: #7F8389;
                        }
                    }

                    .con {
                        // display: flex;
                        // flex-direction: column;
                        font-family: SourceHanSansCN, SourceHanSansCN;
                        font-weight: 400;
                        font-size: 26px;
                        color: #5A4F4F;
                        padding-top: 20px;

                        .row {
                            width: 100%;
                            display: flex;
                            flex-direction: row;
                            justify-content: space-between;
                            // min-height: 56px;
                            // line-height: 40px;
                            margin-bottom: 30px;

                            &:last-child {
                                margin-bottom: 0;
                            }

                            .row-tit {
                                width: 132px;
                                display: inline-block;
                            }

                            .con-col {
                                width: calc(100% - 148px);
                                display: inline-block;
                                color: #7F8389;
                                text-align: right;
                                display: -webkit-box;
                                -webkit-box-orient: vertical;
                                -webkit-line-clamp: 3;
                                overflow: hidden;
                            }

                            .open-more-block {
                                display: block;
                                // background: red;
                            }
                        }
                    }

                    .tscl-more {
                        position: absolute;
                        bottom: 8px;
                        right: 50%;
                        cursor: pointer;
                        font-size: 24px;
                        // width: 50px;

                        .van-icon {
                            width: 24px;
                            color: #7F8389;
                        }
                    }
                }
            }
        }
    }

    .hidden {
        /deep/ .van-tabs__wrap {
            // display: none;
            opacity: 0;
        }
    }

    .show {
        /deep/ .van-tabs__wrap {
            // display: block;
            opacity: 1;
        }
    }
}
</style>